<template>
  <div>
    <div class="container">
      <div class="hh">
        <h1 style="font-weight:800;">请登录。</h1>
      </div>
      <form action="#" class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-6" id="ip1">
            <input
              id="txtName"
              class="form-control"
              type="text"
              placeholder="username"
              style="height: 56px; width: 400px;border-radius: 20px;"
              v-model="name"
            />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            <input
              id="txtPassword"
              class="form-control"
              type="password"
              placeholder="password"
              style="height: 56px; width: 400px;border-radius: 20px;"
              v-model="pwd"
            />
          </div>
        </div>
        <div>
          <p
            style="width: 400px;margin-top: auto; font-size: 14px; font-weight: 200;"
          >你的 username 是你用来登录 iTunes、App Store 和 iCloud 的用户名姓名。</p>
        </div>
        <input
          type="submit"
          class="form-control btn-lg btn-primary"
          style="width: 400px;height: 60px; margin-top: 40px;margin-bottom: 20px; border-radius: 20px;"
          value="提交"
          @click.prevent="login"
        />
        <div>
          <a href style="font-size: 17px;">忘了自己的 username 或密码？</a>
          <br />
          <br />
          <a href style="font-size: 17px;">没有 username？立即创建一个。</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      name: "",
      pwd: ""
    };
  },
  methods: {
    login() {
      this.axios
        .post("/userLogin", { name: this.name, pwd: this.pwd })
        .then(response => {
          if (response.headers.token == null) alert("账号或密码错误");
          else if (response.status == 200) {
            this.saveUser(this.name);
            this.$message({
              type: "success",
              message: "用户" + this.name + "登陆成功"
            });

            console.log(response); //可以先通过该语句查看传回什么内容
            // this.msg=response.data;
            sessionStorage.setItem("token", response.headers.token); //将后端传回的headers中的token存放在sessionStorage中
            sessionStorage.setItem("isAuth", true);
            // this.$router.replace("/home"); //跳转到路径
              if (this.$route.query.redirect) {
                let redirect = this.$route.query.redirect;
                this.$router.replace(redirect);
              } else {
                this.$router.replace("/home");
              }
          } else {
            this.$message({
              type: "error",
              message: "登陆失败,用户名不存在或密码错误"
            });
          }
        })
          .catch(error => {
                if(error.message=="Request failed with status code 401"){
            this.$message({
              type: "error",
              message: "登陆失败,用户名不存在或密码错误，请重新输入"
            });
            this.name="",
            this.pwd=""
                }
            });
    },
    ...mapMutations("user", ["saveUser"])
  }
};
</script>

<style>
.hh {
  width: 980px;
  font-size: 50px;
  padding-bottom: 50px;
  padding-top: 50px;
}
#sologan {
  color: #ffffff;
  /* margin: 0px 0px 30px; */
  font-size: 40px;
  text-align: center;
  font-weight: 600;
  position: absolute;
  top: 1170px;
  left: 340px;
}
#bottom-text {
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 500;
  text-align: center;
  font-weight: 600;
  position: absolute;
  top: 1450px;
  left: 700px;
}
.bottom {
  margin-top: 80px;
  background-color: #14171c;
  width: 104%;
  height: 450px;
}
#tk {
  color: #121212;
  font-weight: 700;
  font-size: 16px;
}
</style>